/**
 * NK卡
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>销卡列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
      <div class="serachTop"> 
            <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <!-- <el-form-item  >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="输入用户ID"
                clearable
              ></el-input>
            </el-form-item> -->
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入使用者ID" 
                type="number"
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.parentUserId"
                placeholder="请输入所有者ID"
                type="number"
                clearable
              ></el-input>
            </el-form-item>  
            <el-form-item label="">
              <el-input
                size="small"
                v-model="formInline.cardNo"
                placeholder="输入卡号后四位"
                type="number"

                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
      </div> 
  
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
      v-if="listData"
    >
      <el-table-column prop="maskCardNo" label="卡号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>
      <el-table-column prop="cardBin" label="卡Bin" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="cardCurrency" label="卡币种" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="cardScheme" label="卡组织" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="cardBalance"
        label="卡片余额"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>{{ b(scope.row.cardBalance) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="cardStatus" label="卡状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ cardTypeData[scope.row.cardStatus] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="changCard(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 卡详情界面 -->
    <el-dialog
      title="查看"
      :close-on-click-modal="false"
      :visible.sync="addFormVisible"
      width="65%"
      @close="closeDialog('addForm')"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form label-width="120px" :model="addForm" ref="addForm">
            <el-form-item label="卡ID" prop="cardId">
              {{ addForm.cardId }}
            </el-form-item>
            <el-form-item label="卡号" prop="cardType">
              {{ addForm.cardNo }}
            </el-form-item>
            <el-form-item label="卡类型" prop="cardType">
              {{ addForm.cardType == "recharge" ? "常规卡" : "共享卡" }}
            </el-form-item>
            <el-form-item label="卡Bin" prop="cardBin">
              {{ addForm.cardBin }}
            </el-form-item>
            <el-form-item label="卡币种" prop="cardCurrency">
              {{ addForm.cardCurrency }}
            </el-form-item>
            <el-form-item label="卡状态" prop="cardStatus">
              {{ cardTypeData[addForm.cardStatus] }}
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model.trim="addForm.remark"
                :rows="5"
                auto-complete="off"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="120px" :model="addForm" ref="addForm">
            <el-form-item label="卡金额" prop="cardBalance">
              {{ b(addForm.cardBalance) }}
            </el-form-item>
            <el-form-item label="有效期" prop="expirationDate">
              {{ addForm.expirationDate ? addForm.expirationDate : "卡失效" }}
            </el-form-item>
            <el-form-item label="CVV">
              {{ CVV ? CVV : "卡失效" }}
            </el-form-item>
            <el-form-item label="省份/洲" prop="billingCity">
              {{ addForm.billingCity }}
            </el-form-item>
            <el-form-item label="城市" prop="billingCity">
              {{ addForm.billingCity }}
            </el-form-item>
            <el-form-item label="详细地址" prop="billingAddress">
              {{ addForm.billingAddress }}
            </el-form-item>
            <el-form-item label="邮政编码" prop="billingPostalCode">
              {{ addForm.billingPostalCode }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      fatherName: "销卡列表",
      loading: false,
      addFormVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      cardTypeData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        userId: "",
        cardStatus: "cancelled",
      },
      listData: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false

    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
  },
  methods: {
    getdata(parameter) {
      let url = getUrl(parameter);
      req("get", "/api/admin/cardList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    getCvv(row) {
      req("get", "/api/admin/getCvv?cardId=" + row.cardId, {})
        .then((res) => {
          if (res.code == 0) {
            this.addForm.expirationDate = res.data.expirationDate;
            this.CVV = res.data.cvv;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    changCard(row) {
      this.addFormVisible = true;
      this.addForm = row;
      this.getCvv(row);
    },
  },
};
</script>

<style scoped>
.el-form-item {
  display: inline-block;
  margin-left: 2%;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 